<template>
    <div>
        <div class="search">
            <input v-model="keyword" type="text" class="search-input" placeholder="输入城市名或拼音">
        </div>
        <div class="search-content" ref="keySerch" v-show="keyword">
            <ul>
                <li class="search-item" v-for="item in list" :key="item.id"  @click="handleCityClick(item.name)">
                    {{item.name}}
                </li>
                <li class="search-item" v-show="hasNodata">没有找到匹配的数据</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState , mapMutations} from 'vuex'
    export default {
        name:'citySearch',
        props:{
            cities:Object
        },
        
        data(){
            return{
                keyword:'',
                list:[],
                timer:null
            }
        },
        computed:{
            hasNodata(){
                return !this.list.length
            }
        },

        methods:{
            handleCityClick(city){
            //  this.$store.commit('changeCity',city)
            this.changeCity(city)
             this.$router.push("/")
    },
     ...mapMutations(['changeCity'])
        },
        watch:{
            keyword(){
                if(!this.keyword){
                    this.list =[]
                    return 
                }
                if(this.timer){
                    clearTimeout(this.timer)
                }
                this.timer =setTimeout(()=>{
                    const result =[]
                    for(let i in this.cities){
                        this.cities[i].forEach(value => {
                            if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
                                result.push(value)
                            }
                        });
                    }
                    this.list =result
                },100)
            }
        },
        mounted(){
            this.scroll =new Bscroll(this.$refs.keySerch)
        }

    }
</script>

<style lang="stylus"scoped>
  @import '~styles/varibles.styl'
  .search
    height: .72rem
    padding: 0 .1rem
    background: $bgColor
    .search-input
      box-sizing: border-box
      width: 100%
      height: .62rem
      padding: 0 .1rem
      line-height: .62rem
      text-align: center
      border-radius: .06rem
      color: #666
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
    .search-item
      line-height: .62rem
      padding-left: .2rem
      background: #fff
      color: #666

</style>